﻿<template>
    <div class="hidden h100 flex-column">
        <component is="style" />
        <div class="flex-row">
            <div class="flex-row-fill">
                <el-form :inline="true" :model="query" size="small" class="margin-top-8 margin-left-4">
                    <el-form-item>
                        <el-date-picker v-model="query.beginTime" type="date" placeholder="选择开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" editable :clearable="false" style="width:150px"></el-date-picker>
                        <span class="margin-lr-6">至</span>
                        <el-date-picker v-model="query.endTime" type="date" placeholder="选择结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" editable :clearable="false" style="width:150px"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button v-on:click="loadList" size="small" type="primary" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-pagination background v-on:size-change="pagerSizeChange" v-on:current-change="pagerIndexChange" :current-page="query.pageIndex" :page-sizes="[20, 50, 100]"
                           :page-size="query.pageSize" layout="prev, pager, next, total, jumper, sizes" :total="query.rowCount"></el-pagination>
        </div>
        <div class="flex-column-fill">
            <div class="h100 hidden">
                <vxe-table :data="list" stripe border style="width:100%;" height="100%" size="mini" auto-resize :row-config="{isCurrent: true, isHover: true}" :column-config="{minWidth:'60px'}">
                    <vxe-column title="日程" align="center" width="150px" field="schTitle"></vxe-column>
                    <vxe-column title="日期" align="center" width="150px" field="schDate"></vxe-column>
                    <vxe-column title="备注" align="center" width="170px" show-overflow field="schMark"></vxe-column>
                    <vxe-column title="操作时间" align="center" width="150px" field="schTime"></vxe-column>
                    <vxe-column title="操作" min-width="160" fixed="right" header-align="center" field="Edit">
                        <template #default="d">
                            <el-button type="primary" plain size="mini" v-on:click="openEdit(d,1)">编辑</el-button>
                            <el-button size="mini" type="danger" v-on:click="openEdit(d,2)">删除</el-button>
                        </template>
                    </vxe-column>
                </vxe-table>
            </div>
        </div>
        <el-dialog :visible.sync="show" :close-on-click-modal="false" :destroy-on-close="true" width="400px" top="30vh" :append-to-body="true">
            <component is="style" />
            <template #title>
                <div>
                    {{obj.optType==0?'新增':'编辑'}}日程
                </div>
            </template>
            <el-form :model="obj" ref="form" label-width="60px" size="small" :rules="rules" v-on:submit.native.prevent>
                <el-form-item label="标题" prop="schTitle">
                    <el-input v-model="obj.schTitle" placeholder="限64字以内" size="small" clearable style="width:100%;" maxlength="64" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="日期" prop="schDate">
                    <el-date-picker v-model="obj.schDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd" editable :clearable="false"
                                    type="date"
                                    placeholder="选择日期" style="width:100%;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="备注" prop="mark">
                    <el-input v-model="obj.schMark" placeholder="请输入...." type="textarea" :autosize="{ minRows: 2, maxRows: 4}" maxlength="400" show-word-limit size="small"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" v-on:click="show=false">关 闭</el-button>
                <el-button type="primary" size="small" v-on:click="submit">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: '50102',
            props: {

            },
            data: function () {
                var _this = this, optor = hxt.store.optor;
                return {
                    optor: optor,
                    query: { beginTime: hxt.dateConfig().monthBegin, endTime: hxt.dateConfig().monthEnd, pageIndex: 1, pageSize: 20, rowCount: 0 },
                    list: [],
                    oldData: { obj: "" },
                    obj: { openId: 0, optType: 0, schId: 0, schTitle: '', schDate: '', schMark: '' },
                    show: false,
                    rules: {
                        schTitle: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                        schDate: [{ required: true, message: '请选择日期', trigger: 'blur' }]
                    }
                }
            },
            computed: {

            },
            watch: {
                
            },
            activated: function () {

            },
            mounted: function () {
                var _this = this;
                _this.loadList();
            },
            methods: {
                pagerSizeChange: function (val) {
                    var _this = this;
                    _this.query.pageSize = val;
                    if (Math.ceil(_this.query.rowCount * 1.0000 / val) >= _this.query.pageIndex) _this.loadList();
                },
                pagerIndexChange: function (val) {
                    var _this = this;
                    _this.query.pageIndex = val;
                    _this.loadList();
                },
                loadList: function () {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + "pc/scheduleList",
                        data: _this.query,
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('加载失败：' + res.errmsg);
                            _this.query.pageIndex = res.data.pageIndex;
                            _this.query.pageSize = res.data.pageSize;
                            _this.query.rowCount = res.data.rowCount;
                            _this.list = res.data.list;
                        }
                    });
                },
                openEdit: function (d, flag) {//0新增 1修改 2删除 3启用/停用
                    var _this = this, obj = { openId: _this.optor.openId, optType: flag, schId: 0, schTitle: '', schDate: '', schMark: '' };
                    if (flag == 1) {
                        _this.obj = $.extend(obj, d.row);
                        _this.oldData.obj = JSON.stringify(_this.obj);
                        _this.show = true;
                        return;
                    };
                    if (flag == 2) {
                        hxt.confirm('确定要删除日程【' + d.row.schTitle+'】吗？', function () {
                            hxt.post({
                                url: hxt.config.link + "pc/scheduleSave",
                                data: {
                                    schId: d.row.schId,
                                    optType: flag
                                },
                                ok: function (res) {
                                    if (res.code != 0) return hxt.error('删除失败：' + res.errmsg);
                                    hxt.success('删除成功');
                                    _this.list.splice(d.rowIndex, 1);
                                }
                            });
                        });
                        return;
                    };
                },
                submit: function () {
                    var _this = this;
                    hxt.validateElForm(_this, 'form', function () {
                        if (JSON.stringify(_this.obj) == _this.oldData.obj) return hxt.msg("未做任何更改");
                        hxt.confirm("确定保存？", function () {
                            hxt.post({
                                url: hxt.config.link + "pc/scheduleSave",
                                data: _this.obj,
                                ok: function (res) {
                                    if (res.code != 0) return hxt.error('保存失败：' + res.errmsg);
                                    hxt.success('保存成功');
                                    if (_this.obj.optType == 0) {
                                        _this.list.push(res.data);
                                    }
                                    else if (_this.obj.optType == 1) {
                                        var g = _this.list.find(function (item) {
                                            return item.schId == _this.obj.schId;
                                        });
                                        if (g) $.extend(g, res.data);
                                    };
                                    _this.show = false;
                                }
                            });
                        });
                    });
                }
            },
            components: {
            }
        };
    })(window.$jscript.fn);
</script>
<style>
</style>